<template>
	<view class="waterfall">
		<!-- :style="'background-color:'+bgColor" :style="{ width: columnWidth + 'px' }" -->
		<view v-for="(item, index) in columnData" :key="index" class="column">
			<view v-for="(childItem, childIndex) in item" :key="childIndex" style="width: 100%"
				:id="'item' + childItem.id" @click.stop="click(childItem)">
				<view class="item"
					:style="'background-color:'+cardBgColor+';margin:'+margin+'rpx;border-radius:'+radius+'rpx;'">
					<image :src="childItem.thumb_img" style="width: 340rpx;height: 340rpx;" mode="aspectFill" lazy-load>
						<!-- :style="{height:childItem.height,width: '100%'}" -->
					</image>
					<view class="title-info">
						<!-- <view class="item-title">{{ childItem.title }}</view>
						<view class="item-desc">{{ childItem.desc }}</view> -->
						<view class="font-size-26 webkit-line-clamp" style="-webkit-line-clamp: 2;">{{childItem.title}}
						</view>
						<!-- <view class="desc">{{item.desc}}</view> -->
						<view class="display-flex align-items">
							<view class="margin-top-10" style="color: #FF2E38;">
								<text class="font-size-24 font-weight-bold">￥</text>
								<text class=" font-size-36 font-weight-bold">{{childItem.sale_price}}</text>
							</view>
							<view v-if="childItem.subsidy_price>0 && childItem.stock > 0"
								class="font-size-22 margin-top-10 margin-left-20"
								style="background: #F6F6F6;padding: 3rpx 12rpx; color: #FD6C56;">
								剩余{{childItem.stock}}单补贴
							</view>
						</view>

						<view v-if="childItem.subsidy_price>0 && childItem.stock > 0"
							class="buttons position-relative display-flex space-between margin-top-20">
							<view class=""></view>
							<image :src="imgaeUrl('/static/home/btn1.png')" style="width: 169.17rpx;height: 80.25rpx;"
								mode="">
							</image>
							<view class="position-absolute display-flex space-between align-items"
								style="width: 100%;height: 100%;top: 0;">
								<view style="width: 84rpx;height: 80.25rpx;"
									class="display-flex flex-direction-column  align-items">
									<view class="">
										<view style="color: #FF2E38;">
											<text class="font-size-20 font-weight-500">￥</text>
											<text class=" font-size-28 font-weight-bold">{{childItem.price}}</text>
										</view>
									</view>
									<view class="font-size-20 " style="color: #FF2E38;">
										{{ childItem.plan_type == 1?'定向高佣':'预估佣金'}}
									</view>
								</view>
								<view class="font-size-36 margin-right-20 font-weight-bold" style="color: #FF2E38;">
									+
								</view>
								<view style="width: 144rpx;height: 80.25rpx;"
									class="color-FFF display-flex flex-direction-column  align-items">
									<view class="">
										<view>
											<text class="font-size-20 font-weight-500">￥</text>
											<text
												class=" font-size-28 font-weight-bold">{{childItem.subsidy_price}}</text>
										</view>
									</view>
									<view class="font-size-20 ">
										每单补贴
									</view>
								</view>
							</view>
						</view>
						<view v-else class="display-flex margin-top-15 align-items">
							<view style="width: 108rpx;font-size: 22rpx;height: 40rpx;"
								class="label center-size-20  color-FFF">
								{{ childItem.plan_type == 1?'定向高佣':'预估佣金'}}
							</view>
							<view
								style="color: #FF2E38;width: 100rpx;font-size: 22rpx; height: 40rpx;border: none;background: #FFEEEA;"
								class="label1 center-size-20">
								¥{{childItem.price}}
							</view>
						</view>
						<view v-if="childItem.reason" class="display-flex margin-top-20">
							<image :src="imgaeUrl('/static/home/dian.png')" style="width: 28rpx;height: 26.79rpx;"
								mode="">
							</image>
							<view class="font-size-22 margin-left-20 file-1 webkit-line-clamp"
								style="-webkit-line-clamp: 2; color: #B45F3E;">
								<text class="font-weight-500">推荐理由：</text>
								<text>{{childItem.reason}}</text>
							</view>
						</view>
						<!-- <view class="margin-top-20" style="border-top: 1rpx solid #F3F3F3;"></view>
												<view class="display-flex space-between align-items margin-top-20">
													<view class="display-flex align-items">
														<image src="/static/logo.png" style="width: 44rpx;height: 44rpx;"
															class="border-radius" mode=""></image>
														<view class="font-size-24 margin-left-20">
															金龙鱼旗舰店
														</view>
													</view>
													<view class="font-size-24 font-weight-500" style="color: #FE693E;">
														9.2
													</view>
												</view> -->

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		imgaeUrl,
	} from '@/utils/index.js';
	export default {
		props: {
			//数据源
			dataList: {
				type: Array,
				required: true,
				default: []
			},
			//显示列数
			column: {
				type: Number,
				required: true,
				default: 2
			},
			//卡片margin(rpx)
			margin: {
				type: Number,
				default: 10
			},
			//卡片圆角(rpx)
			radius: {
				type: Number,
				default: 8
			},
			//页面背景颜色
			bgColor: {
				type: String,
				default: '#edeef2'
			},
			//卡片背景颜色
			cardBgColor: {
				type: String,
				default: '#FFFFFF'
			},
		},
		data() {
			return {
				imgaeUrl,
				columnData: [],
				columnWidth: 0,
				loading: false,
			};
		},
		watch: {
			dataList: {
				immediate: true,
				deep: true,
				handler(newValue, oldValue) {
					this.$nextTick(() => {
						this.setColumnWidth()
						this.setData()
					})
				},
			},
			column: {
				immediate: false,
				deep: true,
				handler(newValue) {
					this.$nextTick(() => {
						this.setColumnWidth()
						this.setData()
					})
				},
			},
		},
		methods: {
			//计算每列的高度
			getElemHeight(index) {
				this.$nextTick(() => {
					var arr = [];
					this.dataList.map((item, index) => {
						uni.getImageInfo({
							src: item.picUrl,
							success: (e) => {
								item.height = (e.height * (this.columnWidth / e.width)) + 'px'
								this.createSelectorQuery().select('#item' + item.id)
									.boundingClientRect(res => {
										arr.push({
											...{
												itemHeight: res.height
											},
											...item
										});
										if (arr.length == this.dataList.length) {
											this.columnData = this.distributeToNArrays(arr,
												this.column);
										}
									}).exec();
							}
						})
					})
				})
			},
			distributeToNArrays(arr, n) {
				let sums = new Array(n).fill(0);
				return arr.reduce(
					(arrays, item) => {
						let minSum = Math.min(...sums);
						let minIndex = sums.indexOf(minSum);
						arrays[minIndex].push(item);
						sums[minIndex] += item.itemHeight;
						return arrays;
					},
					new Array(n).fill().map(() => []),
				)
			},
			setColumnWidth() {
				let width = uni.getSystemInfoSync().windowWidth
				this.columnWidth = Math.floor(width / this.column)
			},
			setData() {
				const resultArray = this.dataList.reduce(
					(acc, cur, index) => {
						const targetIndex = index % this.column;
						acc[targetIndex].push(cur);
						return acc;
					},
					Array.from(Array(this.column), () => []),
				);
				this.columnData = resultArray
				this.getElemHeight()
			},
			click(item) {
				this.$emit('click', item)
			}
		},
	};
</script>

<style scoped>
	.label1 {
		width: 68rpx;
		height: 28rpx;
		background: #FFFFFF;
		border-radius: 0rpx 6rpx 6rpx 0rpx;
		border: 2rpx solid #FE683F;

	}

	.center-size-20 {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
	}

	.label {
		width: 80rpx;
		height: 32rpx;
		background: linear-gradient(270deg, #FE6740 0%, #FE8B1D 100%);
		border-radius: 6rpx 0 0 6rpx;
	}

	.waterfall {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx 5rpx;
		/* display: flex;
		flex-direction: row;
		flex-wrap: wrap; */
	}

	.column {
		/* width: 180px; */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.item {
		overflow: hidden;
	}

	.title-info {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.item-title {
		font-size: 30rpx;
		color: #333333;
		line-height: 46rpx;
		text-align: justify;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.item-desc {
		margin-top: 4rpx;
		font-size: 26rpx;
		color: #666666;
		line-height: 34rpx;
		text-align: justify;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>